<template>
  <div class="toolbartitle">基本信息</div>
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="编码" prop="sampleTypeCode">
            <el-input v-model="formData.sampleTypeCode" placeholder="请输入编码" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="HIS编码" prop="hisCode">
            <el-input v-model="formData.hisCode" placeholder="请输入HIS编码" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="名称" prop="sampleTypeName">
            <el-input v-model="formData.sampleTypeName" placeholder="请输入名称" clearable @change="autoInputCode"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="助记符" prop="inputCode">
            <el-input v-model="formData.inputCode" placeholder="请输入助记符" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="前缀" prop="head">
            <el-input v-model="formData.head" placeholder="请输入前缀" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="提示文字" prop="labelTips">
            <el-input v-model="formData.labelTips" placeholder="请输入提示文字" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="份数" prop="labelPrintNum">
            <el-input v-model="formData.labelPrintNum" type="interger" placeholder="请输入份数" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="费用编码" prop="feeCode">
            <el-input v-model="formData.feeCode" type="text" placeholder="请输入费用编码" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标签颜色" prop="color">
            <template #default>
              <el-color-picker v-model="formData.color" />
              <el-tag class="margin-lr-xs" :style="{ background: formData.color ? formData.color : '' }" v-if="formData.color">{{ formData.color }}</el-tag>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色文本" prop="colorText">
            <el-input v-model="formData.colorText" type="text" placeholder="请输入颜色文本" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="样本类型" prop="sampleTypeId">
            <SelectDataList
              ref="employeeSelectRef"
              :url="'/api/sys/basDictDetail/findDictDetailList'"
              :displayField="[
                { title: '编码', props: 'code', width: '100' }, //列标题
                { title: '名称', props: 'name', width: '100' },
                { title: '主键', props: 'commonId' }
              ]"
              :placeholder="'点击选择样本类型'"
              :searchParam="{
                code: 'spectype'
              }"
              @selectDataRow="SelectRowClick"
              v-model="formData.sampleTypeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="院区" prop="orgName"> <el-input v-model="formData.orgName" placeholder="请输入院区" type="text" disabled clearable></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="检验科采样" prop="labPrintFlag">
            <template #default>
              <el-switch v-model="formData.labPrintFlag" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采样提示" prop="collectTips">
            <el-input v-model="formData.collectTips" placeholder="请输入采样提示" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-form-item label="报告单元" prop="reportUnitName">
          <SelectDataList
            ref="employeeSelectRef1"
            :url="'api/reportGroup/findRptGroupList'"
            :displayField="[
              { title: '编码', props: 'reportGroupCode', width: '300' }, //列标题
              { title: '名称', props: 'reportGroupName' }
            ]"
            :placeholder="'点击选择报告单元'"
            :searchParam="{}"
            @selectDataRow="SelectRowClick1"
            v-model="formData.reportUnitName"
          />
        </el-form-item>
      </el-row>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="感染部位" prop="infectSiteNo">
            <VxePulldownSelection
              v-enterNextInput
              :url="'/lis/bac/base/site-of-infection/dict/findDictList'"
              @confirmClick="SelectRowClickVxe"
              :tableColumn="[
                { field: 'code', title: '编码' },
                { field: 'name', title: '名称' }
              ]"
              :aimKeys="[
                { aimKey: 'infectSiteNa', rowKey: 'name' },
                { aimKey: 'infectSiteNo', rowKey: 'code' }
              ]"
              :displayTexts="['infectSiteNa']"
              :displayTextObj="formData.infectSiteNa ? formData.infectSiteNa : ''"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="whonet编码" prop="whonetCode">
            <el-input v-model="formData.whonetCode" placeholder="请输入whonet编码" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="whonet名称" prop="whonetName">
            <el-input v-model="formData.whonetName" placeholder="请输入whonet名称" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" clearable type="textarea" style="width: 574px"></el-input>
        </el-form-item>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import SelectDataList from '@/components/SelectDataList.vue';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
const formRef = ref(); //表单ref标记

// 表单绑定的数据类型限制
interface FormDataVO {
  id: string /*主键*/;
  sampleTypeCode: string /*样本类型编码*/;
  sampleTypeName: string /*样本类型名称*/;
  sampleTypeGroup: string /*样本类型简称*/;
  hisCode: string /*样本类型简称*/;
  noGermFlag: Number;
  labPrintFlag: Number;
  head: string;
  labelPrintNum: Number /*标签打印份数*/;
  color: string /*16进制颜色值(例如：#fff)*/;
  labelTips: string /*标签提示文字*/;
  collectTips: string /*标签提示文字*/;
  alertRules: string;
  alertOutHours: string;
  inputCode: string;
  seq: Number;
  remark: string /*备注*/;
  whonetCode: string;
  whonetName: string;
  orgId: string /*组织机构主键*/;
  orgCode: string /*组织机构主键*/;
  orgName: string /*组织机构主键*/;
  infectSiteNa: string /*组织机构主键*/;
  infectSiteNo: string /*组织机构主键*/;
  feeCode: string;
  colorText: string;
}
// 表单绑定的数据
let formData = reactive<FormDataVO>({
  id: '' /*主键*/,
  sampleTypeCode: '' /*样本类型编码*/,
  sampleTypeName: '' /*样本类型名称*/,
  sampleTypeGroup: '' /*样本类型简称*/,
  hisCode: '' /*样本类型简称*/,
  noGermFlag: 1,
  labPrintFlag: 1,
  head: '',
  labelPrintNum: 1 /*标签打印份数*/,
  color: '' /*16进制颜色值(例如：#fff)*/,
  labelTips: '' /*标签提示文字*/,
  collectTips: '' /*标签提示文字*/,
  alertRules: '',
  alertOutHours: '',
  inputCode: '',
  seq: 1,
  remark: '' /*备注*/,
  whonetCode: '',
  whonetName: '',
  orgId: '' /*组织机构主键*/,
  orgCode: '' /*组织机构编码*/,
  orgName: '' /*组织机构名称*/,
  infectSiteNa: '',
  infectSiteNo: '',
  feeCode: '',
  colorText: ''
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入' }],
  name: [{ required: true, message: '请输入' }],
  shortName: [{ required: true, message: '请输入' }]
});

let employeeSelectRef: any = ref(null);
let employeeSelectRef1: any = ref(null);

let visibleOutReporter: any = ref(false);
let visibleOutReporter1: any = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let emit = defineEmits(['findListData']);
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;

watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
  },
  {
    deep: true,
    immediate: true
  }
);

// 方法定义区 =============
function addNew(callback) {
  clearFormData(callback);
  if (callback) {
    callback({ a: '初始化完成' });
  }
}

// 清空表单
function clearFormData(callback) {
  formData.id = '';
  formData.sampleTypeCode = '';
  formData.sampleTypeName = '';
  formData.sampleTypeGroup = '';
  formData.hisCode = '';
  formData.feeCode = '';
  formData.noGermFlag = 1;
  formData.labPrintFlag = 1;
  formData.head = '';
  formData.labelPrintNum = 1;
  formData.color = '';
  formData.labelTips = '';
  formData.collectTips = '';
  formData.alertRules = '';
  formData.alertOutHours = '';
  formData.inputCode = '';
  formData.seq = 1;
  formData.remark = '';
  formData.whonetCode = '';
  formData.whonetName = '';
  formData.orgId = '';
  formData.orgCode = '';
  formData.orgName = '';
  formData.colorText = '';

  if (callback) {
    callback(true);
  }
}

// 保存样本类型
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('验证失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (formData.id) {
      url = '/api/lab/labSampleType/editSampleType';
    } else {
      url = '/api/lab/labSampleType/addSampleType';
    }
    // emits: ['findListData'],
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (formData.id) {
            emit('findListData');
            VxeMessage('修改字典成功', VxeNotifyType.success);
          } else {
            emit('findListData');
            VxeMessage('新增字典成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (formData.id) {
            emit('findListData');
            VxeMessage('修改字典失败', VxeNotifyType.error);
          } else {
            emit('findListData');
            VxeMessage('新增字典失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}

function vxePullDownConfirm(e) {
  e.aimKeys.forEach((item: any) => {
    if (e.isChild) {
      //todo
    } else {
      formData[item.targetField] = e.row[item.sourceField];
    }
  });
}
function SelectRowClickVxe(e) {
  e.aimKeys.forEach((m) => {
    formData[m.aimKey] = e.row[m.rowKey];
  });
}

// 组件
//点击选择的那一项受检单位
function SelectRowClick(row) {
  console.log(row);

  formData.id = row.commonId;
  formData.sampleTypeCode = row.code;
  formData.sampleTypeName = row.name;
  visibleOutReporter.value = false;
}

// 组件
//点击选择的那一项受检单位
function SelectRowClick1(row) {
  formData.reportUnitId = row.id;
  formData.reportUnitCode = row.reportGroupCode;
  formData.reportUnitName = row.reportGroupName;
  visibleOutReporter1.value = false;
}

// 自动生成助记符
function autoInputCode() {
  formData.inputCode = funBdsJsResult('firstPinYinFun', formData.sampleTypeName);
}
</script>
<style lang="scss" scoped>
.el-tag {
  color: $base-white;
}
</style>
